<template>
  <el-scrollbar style="height: 100%" class="opration-container">
    <div class="opration">
      <div class="oprationLeft">
        <bs-refresh-button-icon @click.native="doRefresh"></bs-refresh-button-icon>
        <el-select class="show-item" size="small" v-model="showItem" :placeholder="$t('显示子元素')" clearable style="width:105px;margin-right:6px;" @change="doChangeItem" @clear="doClearItem(false)">
            <el-option v-for="(item, index) in showItemData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
        </el-select>
        <bs-set-index-button-icon :show-icon="false" @click.native="doSetIndex" v-has="'SCREEN_TAG_SAVE'"></bs-set-index-button-icon>
   
      </div>
      <div class="oprationRight">
        <el-form :inline="true" size="small" :model="queryData">
          <el-form-item>
            <el-select
              v-model="queryData.queryType"
              placeholder="全部选项"
              clearabler
              style="width: 100px"
              @clear="doClearQuery"
            >
              <el-option
                v-for="(item, index) in searchItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入关键词搜索"
              v-model="queryData.queryParam"
              clearable
              style="width: 160px"
            >
              <template slot="prepend"
                ><i class="iconfont icon-sousuo"
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <bs-search-button-icon @click.native="doList"></bs-search-button-icon>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import ScreenApi from '@/api/screen'

export default {
    name: 'DeviceLogCondition',
    data() {
        return {
            searchForm: {},
            showItem: '',
            showItemData: [
              { name: '显示子元素', value: true },
              { name: '隐藏子元素', value: false }
            ],
            searchItemData: [
                { name: '全部选项', value: 0 },
                { name: '屏幕名称', value: 1 },
                { name: '车牌号码', value: 2 },
                { name: '车辆编号', value: 3 },
                { name: '屏幕地址', value: 4 }
            ]
        }
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    props: {
      queryData: {
        default: {}
      }
    },
    methods: {
      // 刷新
      doRefresh() {
        this.doList()
        this.$message.success('刷新成功')
      },
      // 显示子元素
      doChangeItem(val) {
          this.queryData.showChild = val
          this.doList()
      },
      doClearItem() {
          this.queryData.showChild = false
      },
      // 查询
      doList() {
          this.queryData.page = 1
          this.$eventBus.$emit('doList', this.queryData)
      },
      // 点击清除下拉选择条件
      doClearQuery() {
        // this.queryData.queryType = 0
        // this.queryData.queryParam = ''
        this.$set(this.queryData, 'queryType', 0)
        this.$set(this.queryData, 'queryParam', '')
      },
      // 设置标签弹窗
      doSetIndex() {
        this.$emit('setIndex')
      }
    }
}
</script>